<template>
  <view style="background-color: #50cca6">
    <u-navbar
      title="我的评论"
      bgColor="#50CCA6"
      :fixed="false"
      :autoBack="true"
      leftIconColor="#fff"
    >
      <template #center>
        <text style="color: #fff"> 我的评论 </text>
      </template>
    </u-navbar>
    <mescroll-uni
      height="100%"
      @init="mescrollInit"
      :down="downOption"
      :up="upOption"
      @down="downCallback"
      style="
        border-top-right-radius: 32rpx;
        border-top-left-radius: 32rpx;
        background-color: #fff;
      "
    >
      <u-empty
        text="暂无评论"
        mode="list"
        iconSize="280"
        icon="/static/bookshelf/mkz_default_collnull_new.png"
        style="margin-top: auto; margin-bottom: auto"
        :show="comment_list.length == 0"
      ></u-empty>
      <view
        style="width: 100%; margin: 30rpx; font-size: 28rpx"
        v-for="(item, index) in comment_list"
      >
        <view style="display: flex">
          <u-avatar
            :src="item.upic"
            fontSize="18"
            randomBgColor
            style="margin-right: 10px"
          ></u-avatar>
          <view style="width: 100%; margin-right: 30px">
            <text style="color: #333333">
              {{ item.unichen }}
            </text>
            <view style="font-size: 20rpx; margin-top: 2rpx; color: #999999">
              {{ item.addtime }}
            </view>
            <!-- <view style="font-size: 32rpx; margin-top: 10rpx">
              {{ item.addtime }}
            </view> -->

            <view
              v-if="id"
              style="
                margin-top: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <text style="color: #a9a9a9; font-weight: 300; font-size: 22rpx">
                {{ item.addtime }}
              </text>
              <view style="margin-right: 20px">
                <view
                  v-if="item.is_zan == 0"
                  style="display: flex"
                  @click="comment_zan_click(item.id)"
                >
                  <view style="display: flex">
                    <u-icon
                      name="/static/detail/ic_coment_dz_off_1.png"
                      size="18"
                    ></u-icon>
                  </view>
                  <view style="display: flex; margin-left: 1px">
                    <text style="color: #aaaaaa; font-size: 12px">{{
                      item.zan
                    }}</text>
                  </view>
                </view>
                <view
                  v-else
                  style="display: flex"
                  @click="comment_zan_cancel(item.id)"
                >
                  <view style="display: flex">
                    <u-icon
                      name="/static/detail/ic_coment_dz_on.png"
                      size="18"
                    ></u-icon>
                  </view>
                  <view style="display: flex; margin-left: 1px">
                    <text style="color: #ff620e; font-size: 12px">{{
                      item.zan
                    }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view style="height: 10px"></view>
            <!-- <u-line></u-line> -->
            <view style="height: 10px"></view>
            <!-- <u-gap height="0.5" bgColor="#e8e8e8"></u-gap> -->
          </view>
        </view>
        <view
          style="
            font-size: 28rpx;
            margin-top: 2rpx;
            color: #333333;
            line-height: 34rpx;
            width: calc(100% - 48rpx);
          "
        >
          {{ item.text }}
        </view>
        <view style="display: flex; align-items: center;margin-top: 10px;">
          <image
            src="./images/dz.png"
            style="height: 32rpx; width: 30rpx"
          ></image>
          <text style="font-size: 24rpx; color: #999999; line-height: 33rpx;margin-left: 10rpx;">
            {{ item.zan }}</text
          >
        </view>
        <view
          @click="get_detail11(item.mid)"
          v-if="!id"
          style="
            background-color: #f0f0f0;
            width: calc(100% - 48rpx);
            height: 80px;
            padding: 10px 0 10px 0px;
            display: flex;
            border-radius: 3px;
            margin-top: 30rpx;
          "
        >
          <u--image
            :src="item.comic.pic"
            width="60px"
            height="80px"
            style="margin-left: 10px"
            @error="imageError($event, index)"
          >
            <view slot="loading" style="font-size: 24px">加载中...</view>
          </u--image>
          <view
            style="margin-left: 10px; display: flex; flex-direction: column"
          >
            <view style="font-weight: bold">
              {{ item.comic.name }}
            </view>
            <view style="font-size: 25rpx; color: #a9a9a9">
              作者: {{ item.comic.author }}
            </view>
            <view style="font-size: 25rpx; color: #a9a9a9; margin-top: 5px">
              <u-text
                :text="item.comic.text"
                :lines="2"
                size="25rpx"
                color="#A9A9A9"
              >
              </u-text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
    <view class="tabbar" v-if="id">
      <u-line></u-line>
      <view
        style="
          display: flex;
          height: 100%;
          justify-content: space-between;
          align-items: center;
          margin: 0 24rpx;
        "
      >
        <u--input
          placeholder="聊聊你的观点~"
          style="background-color: #f7f7f7"
          shape="circle"
          v-model="value"
        ></u--input>
        <u-button
          style="color: #999999; width: 50px; margin-left: 10px"
          shape="circle"
          color="#F7F7F7"
          icon="email"
          @click="handleClick"
        >
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    w_md5,
  },
  data() {
    return {
      username: "神秘人",
      comment_list: "",
      id: null,
      time: "",
      token: "",
      app_key: "",
      websiteUrl: "",
      value: "",
      utoken: "",
      downOption: {
        use: true,
        auto: true,
        autoShowLoading: true,
        offset: 50,
      },
      upOption: {
        use: false,
      },
    };
  },
  onLoad(option) {
    this.username = option.username;
    this.id = option.id;
    if (option.id) {
      this.get_detail();
    } else {
      this.get_comment_list();
    }
  },
  methods: {
    imageError: function (e, index) {
      // console.error('image发生error事件，携带值为' + e.detail.errMsg)
      this.comment_list[index]["book"]["cover_url"] =
        "../../../static/img_error.jpg";
    },
    get_detail11(book_id) {
      console.log(book_id);
      uni.navigateTo({
        url: "../../detail/detail?id=" + book_id,
      });
    },
    get_comment_list() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/kxapps/comment?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("评论列表: ", res.data);
          this.comment_list = res.data.list;
          this.mescroll.endSuccess();
        },
      });
    },
    get_detail() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      if (!uni.getStorageSync("user")) {
        console.log("未登录", uni.getStorageSync("user"));
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&id=" +
          this.id +
          "&timestamp=" +
          time;
      } else {
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&id=" +
          this.id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
      }

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/info?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.comment_list = res.data.comic.comment_list;
          this.mescroll.endSuccess();

          //   this.data = res.data.comic;
          //   this.love_list = res.data.comic.love_list;
          //   this.mescroll.endSuccess();
          //   setTimeout(() => {
          //     this.loading_show = false;
          //   }, 500);
          //   if (this.title !== "") {
          //     this.title = this.data.name;
          //   }

          //   if (res.data.comic.chapter_list.length == 0) {
          //     (this.data_null = true), (this.data_null_text = "暂无章节");
          //     this.read_status = 2;
          //     this.chapter_name = "暂无章节";
          //   } else {
          //     if (this.chapter_name == "") {
          //       this.read_status = 0;
          //       this.chapter_name = res.data.comic.chapter_list[0].name;
          //     }
          //   }
          //   // 判断是否登录
          //   if (this.isLogin) {
          //     this.user = res.data.comic.user;
          //   }
        },
      });
    },
    downCallback() {
      console.log("目录下拉刷新");
      if (this.id) {
        this.get_detail();
      } else {
        this.get_comment_list();
      }
      // setTimeout(() => {
      //  	this.mescroll.endSuccess();
      // }, 2000);
    },
    // 评论点赞
    comment_zan_click(id) {
      if (!uni.getStorageSync("user")) {
        console.log("未登录");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&fid=0" +
          "&id=" +
          id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/comment/zan?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("评论点赞结果: ", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: "点赞成功",
              });
              //   this.shuaxin(this.id);
              this.get_detail();
            } else {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: res.data.msg,
              });
            }
            // this.get_comment_list()
          },
        });
      }
    },
    //评论赞取消
    comment_zan_cancel(id) {
      if (!uni.getStorageSync("user")) {
        console.log("未登录");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&fid=0" +
          "&id=" +
          id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/comment/zan?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("评论点赞结果: ", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: "取消点赞",
              });
              this.get_detail();
            } else {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: res.data.msg,
              });
            }
            // this.get_comment_list()
          },
        });
      }
    },
    handleClick() {
      if (this.value == "") {
        return uni.showToast({
          icon: "none",
          title: "是不是忘记写点什么了",
        });
      }
      if (!uni.getStorageSync("user")) {
        console.log("未登录");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;

        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&mid=" +
          this.id +
          "&text=" +
          this.value +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/comment/add?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            this.value = "";
            console.log("评论结果: ", res.data);
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
            this.get_detail();
            // this.get_comment_list()
          },
        });
      }
    },
  },
};
</script>

<style>
.tabbar {
  z-index: 99999;
  width: 100%;
  height: 98rpx;
  position: fixed;
  bottom: 0px;
  background-color: #ffffff;
  left: 0;
  right: 0;
}
</style>
